<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>面板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="/static/admin/static/component/pear/css/pear.css" />
    <link href="/static/public/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/admin/pages/theme/css/theme.css?v=#(version)" rel="stylesheet"/>
</head>
<body class="pear-container">
<div class="p-container">
    <div class="p-theme-addPanel">
        <a id="addTheme" title="安装新主题" class="p-text-btn">安装新主题</a> -
        <a id="createTheme" title="新建一个主题" class="p-text-btn">新建主题</a> -
        <a href="http://perfree.org.cn/theme" target="_blank" class="p-text-btn">主题仓库</a> -
        <a href="http://perfree.gitee.io/theme-develop" target="_blank" class="p-text-btn">主题开发指南</a>
    </div>
    <div class="p-theme-container layui-row">
    </div>
</div>

<script id="themeTpl" type="text/html">
    #[[
        {{#  layui.each(d, function(index, item){ }}
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 p-theme-Abox">
            <div class="p-theme-box">
                <div class="themeTitle">{{ item.name}}</div>
                <div class="themeImgBox">
                    <img src="/static/public/images/loading.gif" data-src="{{ item.screenshots}}" class="lazyload">
                </div>
                <div class="p-theme-info">
                    <a class="layui-btn themeBtn editThemeBtn" data-path="{{ item.path}}" data-name="{{ item.name}}">
                        <i class="fa fa-edit" aria-hidden="true"></i> 编辑
                    </a>
                    {{#  if(item.isActive != 1){ }}
                        <a class="layui-btn themeBtn removeThemeBtn" data-path="{{ item.path}}">
                            <i class="fa fa-trash-o" aria-hidden="true"></i> 卸载
                        </a>
                        <a class="layui-btn themeBtn previewThemeBtn" data-path="{{ item.path}}" data-name="{{ item.name}}">
                            <i class="fa fa-search" aria-hidden="true"></i> 预览
                        </a>
                        <a class="layui-btn themeBtn switchThemeBtn rBtn" data-path="{{ item.path}}">
                            <i class="fa fa-lock" aria-hidden="true"></i> 启用
                        </a>
                    {{#  } }}
                    {{#  if(item.isActive == 1){ }}
                    <a class="layui-btn themeBtn settingBtn" data-path="{{ item.path}}">
                        <i class="fa fa-cog" aria-hidden="true"></i> 设置
                    </a>
                    <a class="layui-btn themeBtn toThemeBtn" data-path="{{ item.path}}" data-name="{{ item.name}}">
                        <i class="fa fa-external-link" aria-hidden="true"></i> 访问
                    </a>
                    <a class="layui-btn themeBtn activeBtn rBtn"><i class="fa fa-unlock-alt" aria-hidden="true"></i> 已启用</a>
                    {{#  } }}
                </div>
            </div>
        </div>
        {{#  }); }}
    ]]#
</script>

<script src="/static/public/js/laysize.js"></script>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.js"></script>
<script src="/static/admin/static/component/pear/pear.js"></script>
<script src="/static/public/js/common.js?v=#(version)"></script>
<script>
    var layer, upload, laytpl, flow,$,toast;
    let loadIndex;
    layui.use(['upload', 'layer', 'laytpl', 'flow', 'jquery','toast'], function () {
        layer = layui.layer;
        upload = layui.upload;
        laytpl = layui.laytpl;
        flow = layui.flow;
        $ = layui.jquery;
        toast = layui.toast;
        initThemeList();

        upload.render({
            elem: '#addTheme',
            url: '/admin/theme/addTheme',
            accept: "file",
            acceptMime: "application/zip",
            exts: "zip",
            before: function(obj){
                loadIndex = layer.load();
            },
            done: function (res) {
                layer.close(loadIndex);
                if (res.code === 200) {
                    parent.toast.success({message: "主题安装成功",position: 'topCenter'});
                    initThemeList();
                } else {
                    parent.toast.error({message: res.msg,position: 'topCenter'});
                }
            },
            error: function () {
                layer.close(loadIndex);
                parent.toast.error({message: "主题安装失败",position: 'topCenter'});
            }
        });

        // 新建主题
        $("#createTheme").click(function () {
            layer.open({
                title: "新建主题",
                type: 2,
                offset: '20%',
                area: common.layerArea($("html")[0].clientWidth, 450, 400),
                shadeClose: true,
                anim: 1,
                resize: true,
                maxmin: true,
                content: '/admin/theme/createThemePage'
            });
        });

        $(".p-theme-container").on("click", ".switchThemeBtn", function () {
            const path = $(this).attr("data-path");
            loadIndex = layer.load();
            $.ajax({
                type: "POST",
                url: "/admin/theme/switch",
                contentType: "application/json",
                data: JSON.stringify({path: path}),
                success: function (d) {
                    layer.close(loadIndex);
                    if (d.code === 200) {
                        parent.toast.success({message: "切换主题成功",position: 'topCenter'});
                        initThemeList();
                    } else {
                        parent.toast.error({message: "切换主题失败",position: 'topCenter'});
                    }
                },
                error: function (data) {
                    layer.close(loadIndex);
                    parent.toast.error({message: "切换主题失败",position: 'topCenter'});
                }
            });
        });

        $(".p-theme-container").on("click", ".removeThemeBtn", function () {
            const path = $(this).attr("data-path");
            loadIndex = layer.load();
            layer.confirm('卸载将直接删除主题,确定要卸载吗?', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: "POST",
                    url: "/admin/theme/del",
                    contentType: "application/json",
                    data: JSON.stringify({path: path}),
                    success: function (d) {
                        layer.close(loadIndex);
                        if (d.code === 200) {
                            parent.toast.success({message: "卸载主题成功",position: 'topCenter'});
                            initThemeList();
                        } else {
                            parent.toast.error({message: "卸载主题失败",position: 'topCenter'});
                        }
                        layer.close(index);
                    },
                    error: function (data) {
                        layer.close(loadIndex);
                        parent.toast.error({message: "卸载主题失败",position: 'topCenter'});
                        layer.close(index);
                    }
                });
            });
        });

        $(".p-theme-container").on("click", ".editThemeBtn", function () {
            const path = $(this).attr("data-path");
            parent.layui.admin.addTab('editTheme', "编辑主题", '/admin/theme/edit?path=' + path);
        });

        $(".p-theme-container").on("click", ".previewThemeBtn", function () {
            const path = $(this).attr("data-path");
            window.open("/?previewTheme="+ path,"_blank");
        });

        $(".p-theme-container").on("click", ".toThemeBtn", function () {
            window.open("/","_blank");
        });

        $(".p-theme-container").on("click", ".settingBtn", function () {
            parent.layui.admin.toPage('/admin/theme/setting', '', '');
        });
    });


    /**
     * 加载主题列表
     */
    function initThemeList() {
        loadIndex = layer.load();
        $.ajax({
            type: "GET",
            url: "/admin/theme/themeList",
            success: function (d) {
                layer.close(loadIndex);
                if (d.code === 200) {
                    laytpl($("#themeTpl").html()).render(d.data, function (html) {
                        $(".p-theme-container").html(html);
                    });
                    flow.lazyimg({
                        elem: '.p-theme-container img'
                    });
                } else {
                    parent.toast.error({message: "加载主题列表失败",position: 'topCenter'});
                }
            },
            error: function (data) {
                layer.close(loadIndex);
                parent.toast.error({message: "加载主题列表失败",position: 'topCenter'});
            }
        });
    }
</script>
</body>
</html>